<template>
    <div class="data-warehouse">
        <NavCard></NavCard>
        <BreadCrumb class="bread-crumb" />
        <h2 class="title">数据仓库</h2>
        <div class="detail">
            <div class="content">
                <div class="item">
                    <div class="icon" :style="{
                        backgroundColor: '#9966FF',
                        backgroundImage: `url(${require('@/assets/images/icons/hospital-count.png')})`
                    }"></div>
                    <div class="label">医院总数：</div>
                    <div class="value">{{ infoData.total }}</div>
                </div>
                <div class="item">
                    <div class="icon" :style="{
                        backgroundColor: '#32BBFF',
                        backgroundImage: `url(${require('@/assets/images/icons/supervised-hospital.png')})`
                    }"></div>
                    <div class="label">监管医院：</div>
                    <div class="value">{{ infoData.SupervisedHospital }}</div>
                </div>
                <div class="item">
                    <div class="icon" :style="{
                        backgroundColor: '#FFBB34',
                        backgroundImage: `url(${require('@/assets/images/icons/warning-count.png')})`
                    }"></div>
                    <div class="label">预警项：</div>
                    <div class="value">{{ infoData.warningCount }}</div>
                </div>
                <div class="item">
                    <div class="icon" :style="{
                        backgroundColor: '#FF5500',
                        backgroundImage: `url(${require('@/assets/images/icons/drug-item.png')})`
                    }"></div>
                    <div class="label">药品项：</div>
                    <div class="value">{{ infoData.drugItem }}</div>
                </div>
                <div class="item">
                    <div class="icon" :style="{
                        backgroundColor: '#FF5500',
                        backgroundImage: `url(${require('@/assets/images/icons/physician.png')})`
                    }"></div>
                    <div class="label">医师数：</div>
                    <div class="value">{{ infoData.physician }}</div>
                </div>
                <div class="item">
                    <div class="icon" :style="{
                        backgroundColor: '#FFBB34',
                        backgroundImage: `url(${require('@/assets/images/icons/monitor-count.png')})`
                    }"></div>
                    <div class="label">监控数量：</div>
                    <div class="value">{{ infoData.monitorCount }}</div>
                </div>
                <div class="item">
                    <div class="icon" :style="{
                        backgroundColor: '#9966FF',
                        backgroundImage: `url(${require('@/assets/images/icons/outpatient-count.png')})`
                    }"></div>
                    <div class="label">就诊总数：</div>
                    <div class="value">{{ infoData.outpatientCount }}</div>
                </div>
                <div class="item">
                    <div class="icon" :style="{
                        backgroundColor: '#4373F1',
                        backgroundImage: `url(${require('@/assets/images/icons/prescription.png')})`
                    }"></div>
                    <div class="label">处方数量：</div>
                    <div class="value">{{ infoData.prescription }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import NavCard from '@/components/nav-card/index.vue'
import BreadCrumb from '@/components/bread-crumb/index.vue'
import { listStatistics} from "@/api/his/statistics";
export default {
    name: 'DataWarehouse',
    components: {
        NavCard,
        BreadCrumb,
    },
    data() {
        return {
            infoData: {
                total: 114,
                SupervisedHospital: 20,
                warningCount: 300,
                drugItem: 16,
                physician: 20,
                monitorCount: 400,
                outpatientCount: 144,
                prescription: 144,
            }
        }
    },
  created() {
    this.getList();
  },
  methods: {
    /** 查询【请填写功能名称】列表 */
    getList() {
      listStatistics().then(response => {
        console.log(response)
        this.infoData.total = response.data.hospitalTotal;
        this.infoData.SupervisedHospital = response.data.physician;
        this.infoData.warningCount = response.data.drug;
        this.infoData.drugItem = response.data.drug;

        this.infoData.physician = response.data.dockerTotal;
        this.infoData.monitorCount = response.data.rulegruop;
        this.infoData.outpatientCount = response.data.clinic;
        this.infoData.prescription = response.data.pre;

      });
    }
  }
}
</script>
<style lang="scss" scoped>
.pharmaceutical-ingredient {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.bread-crumb {
    margin-top: 21px;
    padding-left: 20px;
}

.title {
    font-size: 26px;
    color: #4B4B4B;
    font-weight: bold;
    margin: 0;
    margin-top: 18px;
    padding-left: 20px;
}

.detail {
    margin-left: 20px;
    padding: 26px 0;
    flex: 1;
    display: flex;
    flex-direction: column;

    .content {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        margin-top: -26px;

        .item {
            margin-top: 26px;
            display: flex;
            flex-direction: column;
            padding: 17px 20px 20px 110px;
            background: #FFFFFF;
            box-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.08);
            border-radius: 10px;
            height: 99px;
            flex-basis: 23%;
            margin-right: 31px;
            justify-content: space-between;
            position: relative;

            &:nth-child(4) {
                margin-right: 0;
            }

            &:nth-child(8) {
                margin-right: 0;
            }

            .label {
                color: #4C4C4C;
                font-size: 18px;
                font-weight: 500;
                line-height: 18px;
            }

            .value {
                font-weight: 500;
                font-size: 30px;
                color: #4C4C4C;
                line-height: 22px;
            }

            .icon {
                position: absolute;
                width: 66px;
                height: 66px;
                left: 24px;
                top: 50%;
                transform: translateY(-50%);
                border-radius: 20px;
                background-repeat: no-repeat;
                background-size: 30px 30px;
                background-position: center center;
            }
        }
    }
}
</style>
